﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿学习网</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="ICON" href="image/projectImage/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<header id="header-box">
    <nav class="navbar navbar-default m-b-0"  >
        <div class="container-fluid"  >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./my_home">码猿</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="./my_home"><i class="fa fa-home m-r-5"></i>主页</a></li>
                    <li><a href="./my_library"><i class="fa fa-book m-r-5"></i>博客</a></li>
                    <li><a href="./externalLink"><i class="fa fa-map-signs m-r-5"></i>外链</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.remoteUser}==null">
                    <li><a href="./userLogin">未登录</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.getAttribute('Username')}!=null">
                    <li class="dropdown">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 9px 15px">[[${#httpServletRequest.getAttribute("Username")}]]<img class="m-l-5" th:src="'./image/userImage/'+${#httpServletRequest.remoteUser}+'/userInfo.png'" alt=""><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="'./userInfo?userAccount='+${#httpServletRequest.remoteUser}">用户信息</a></li>
                            <li><a href="./changePassword">修改密码</a></li>
                            <li><a th:href="'./writeArticle?userAccount='+${#httpServletRequest.remoteUser}">发布博客</a></li>
                            <li>
                                <form class="p-0" style="color: #4c4c4c;cursor: pointer;" th:action="@{./logout}" method="post" id = "logoutForm">
                                    <a style="color: #333; padding: 3px 20px" onclick="javascript:$('#logoutForm').submit()"/>退出登录</a>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="Search" v-model="researchText">
                        <span class="input-group-addon btn btn-info" v-on:click="researchUrl='./researchPage';research_btn()"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="Sidebar">
        <a href="./my_home" title="码猿主页"><i class="fa fa-home fa-lg"></i></a>
        <a href="javascript:;" class="stick" title="置顶" style="display: none"><i class="fa fa-eject"></i></a>
    </div>
</header>
<div class="center clear" id="center-box">
    <div class="jumbotron masthead m-b-0 main-jumbotron">
        <div class="container masthead-container text-center">
            <div class="main-menu f-l">
                <div class="menu-box">
                    <div class="menu" v-for="recommendList in recommendList" v-on:mouseenter="isShow=recommendList.libraryType" v-cloak>
                        <a href="javascript:;" >
                            <i class="fa fa-angle-right f-r"></i>{{recommendList.libraryType}}
                        </a>
                        <div class="sub-menu" v-show="isShow==recommendList.libraryType" style="display: none;">
                            <div class="innerBox clearfix">
                                <div class="subinnerBox">
                                    <div class="recomment-box">
                                        <div class="title">博客推荐&nbsp;-&nbsp;{{recommendList.libraryType}}</div>
                                        <p v-for="articleInfo in recommendList.recommend">
                                            <a target="_blank" v-bind:href="articleInfo.articleUrl" data-track="syqd-1-3"><span class="cate-tag">博客</span>{{articleInfo.articleTitle}}</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bc-social">
        <div class="container">
            <ul class="bc-social-buttons">
                <li class="social-qq">
                    <i class="fa fa-qq m-r-5"></i>码猿博客交流群：<span id="">1234567890</span>
                </li>
                <li class="social-forum">
                    <a href="#" title="" target="_blank">
                        <i class="fa fa-comments m-r-5"></i>码猿博客论坛
                    </a>
                </li>
                <li class="social-weibo">
                    <a href="#" title="" target="_blank"><i class="fa fa-weibo m-r-5"></i>新浪微博：@码猿博客</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container userRecomment-box p-0" v-show="isTrace" v-cloak>
        <div class="catalog-title">
            <h3 class="m-t-0">用户推荐</h3>
        </div>
        <div class="catalog-content" style="max-height: none">
            <div class="catalog-detail" v-for="userRecommendList in userRecommendList" v-cloak>
                <div class="recomment-box p-20">
                    <p>
                        <a style="color: #333;" target="_blank" v-bind:href="userRecommendList.articleUrl" data-track="syqd-1-3"><span class="cate-tag">{{userRecommendList.libraryName}}</span>{{userRecommendList.articleTitle}}</a>
                    </p>
                </div>
            </div>
            <div v-show="!userRecommendList.length" class="p-t-20 p-b-30" style="font-size: 22px" v-cloak>
                暂无数据！！！
            </div>
        </div>

    </div>
</div>
<footer class="footer">
    <div class="container text-center">
        <div class="row footer-top m-t-35">
            <div class="footer-icon">
                <a href="#" class="m-r-25" title="新浪微博"><i class="fa fa-weibo fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="微信"><i class="fa fa-weixin fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="腾讯QQ"><i class="fa fa-qq fa-2x"></i></a>
                <a href="#" title="Github"><i class="fa fa-github-alt fa-2x"></i></a>
            </div>
        </div>
        <div class="footer-link m-t-5">
            <!-- <a href="/about/us" target="_blank" title="关于我们">关于我们</a> -->
            <a href="" target="_blank" title="企业合作" class="m-r-25">企业合作</a>
            <a href="" target="_blank" title="人才招聘" class="m-r-25">人才招聘</a>
            <a href="" target="_blank" title="联系我们" class="m-r-25">联系我们</a>
            <a href="" target="_blank" title="讲师招募" class="m-r-25">讲师招募</a>
            <a href="" target="_blank" title="常见问题" class="m-r-25">常见问题</a>
            <a href="" target="_blank" title="意见反馈" class="m-r-25">意见反馈</a>
            <a href="" target="_blank" title="意见反馈" class="m-r-25">慕课大学</a>
            <a href="" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="row footer-bottom">
            <p>ML&nbsp;&nbsp;&copy;&nbsp;2017-2017&nbsp;&nbsp;<a href="my_home.html">码猿学习网</a>&nbsp;&nbsp;版本所有</p>
        </div>
    </div>
</footer>

<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="js/vue.js"></script>

<script>
    $(function(){
        getRecommend();  //获取博客推荐的数据
        getUserPersonalRecommend();  //获取用户推荐的数据
        loginStatus(); //登录状态
        var backButton=$(".stick");
        backButton.on('click',function(){
            $('html,body').animate({
                scrollTop:0
            },500)
        });
        $(window).on('scroll',function(){
            if($(window).scrollTop()>$(window).height()/1.5){
                backButton.show();
            }else{
                backButton.hide();
            }
        });
    });

    var vm_header=new Vue({
        el:'#header-box',
        data:{
            researchText:'',
            researchType:'',
            researchUrl:'',
        },
        methods:{
            research_btn:function () {
                var researchText=this.researchText;
                var researchUrl=this.researchUrl;
                window.location.href=researchUrl+'?search='+researchText
            },
        }
    });

    var vm_myHome=new Vue({
        el:"#center-box",
        data:{
            recommendList:'',
            userRecommendList:'',
            isTrace:false,
            isShow:'移动开发',
        },
    })

    function getRecommend() {
        $.ajax({
            type: 'GET',
            url: './getGuestRecommend',
            success: function (data) {
                console.log(data);
                console.log(data.length);
                var a=new Array();
                for(var i=0;i<data.length;i++){
                    a[i]=JSON.parse(data[i]);
                }
                vm_myHome.recommendList=JSON.parse(JSON.stringify(a));
                console.log(vm_myHome.recommendList)
            }
        });
    }

    function getUserPersonalRecommend() {
        $.ajax({
            type: 'GET',
            url: './getUserPersonalRecommend',
            success: function (data) {
                console.log(data);
                console.log(data.length);
                console.log(JSON.stringify(data));
                if(data.length==0||data==''){
                    vm_myHome.isTrace=false;
                }else{
                    vm_myHome.isTrace=true;
                    var b=new Array();
                    for (var i=0;i<data.length;i++ ){
                        b.push(JSON.parse(data[i]))
                    }
                    vm_myHome.userRecommendList=b;
                }
            }
        });
    }

    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "码猿博客，欢迎您",
            type: "info",
            confirmButtonText: "确认",
        }, function(bool) {
        });
    }
</script>
</body>
</html>
